<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-10-29 13:14:59
 * @FilePath: \tmsadmin\src\views\contract\template\components\table.vue
-->

<template>
  <el-table
    :data="props.tableData"
    v-loading="props.loading"
    style="width: 100%"
    :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
    :default-sort="{ prop: 'createTime', order: 'descending' }"
     @selection-change="handleSelectionChange"
  >
    <template #empty>
      <div
        class="v2-table__empty-data v2-table__empty-border"
        style="width: 100%"
      >
        <div class="v2-table__empty-default">
          <div style="padding-top: 40px; height: 50px">
            <i class="icon ion-ios-briefcase-outline" style="font-size: 60px" />
          </div>
          <span>暂无数据</span>
        </div>
      </div>
    </template>
    <el-table-column
        type="selection"
        fixed="left"
        align="center"
        width="50"
      />
    <el-table-column
      v-for="item in tableColumns"
      :key="item.id"
      :fixed="item.fixed"
      :prop="item.prop"
      :label="item.title"
      :min-width="item.minwidth"
      :sortable="item.sortable"
      :filters="item.filters"
      :align="item.align"
      :filter-method="item.filters && filterHandler"
      :show-overflow-tooltip="true"
    >
      <template #default="scope">
        <template v-if="item.prop == 'actions'">
          
          <el-button
            size="small"
            type="primary"
            @click="showEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="showDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
        <template v-else-if="item.prop == 'index'">
          {{ scope.$index + 1 }}
        </template>
        <template v-else-if="item.prop == 'template'">
          <el-button type="text" @click="showDialog(scope.row)">查看模板</el-button>
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <div style="line-height: 32px;">
    </div>
    <el-pagination
      v-model:current-page="props.pageNum"
      v-model:page-size="props.pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :background="true"
      layout="sizes, prev, pager, next"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="dialogVisible" :title="'合同模板'" width="800px" :append-to-body="true" :before-close="handleClose">
    <iframe :src="htmlUrl" frameborder="0" style="width: 100%;height: 70vh"></iframe>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { REQUEST } from '@/api/request'
import { onMounted } from 'vue'
import { ref } from 'vue'
const emits = defineEmits(['change', 'edit', 'ok','selectionChange','remark'])
const props = defineProps({
  tableData: { type: Array, default: [] },
  tableColumns: { type: Array, default: [] },
  pageSize: { type: Number, default: 10 },
  pageNum: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  loading: { type: Boolean, default: false }
})
const dialogVisible = ref(false)
const content = ref('')
const htmlUrl = ref('')
const showDialog = (data) => {
  console.log(data,'data')
  content.value = data.template
  const html = content.value.replaceAll('<p','<div')
  const html1 = html.replaceAll('</p>','</div>')
   REQUEST.POST('PREVIEW', {
      html:`<div style="font-size:13px!important;color:#333333!important;">${html1}</div>`
    }).then((res: any) => {
      htmlUrl.value = res.data
      dialogVisible.value = true
    })
  }
const handleClose = () => {
  content.value = ''
  dialogVisible.value = false
}
const handleSizeChange = (val: number) => {
  emits('change', {
    pageNum: props.pageNum,
    pageSize: val
  })
}
const handleCurrentChange = (val: number) => {
  emits('change', {
    pageNum: val,
    pageSize: props.pageSize
  })
}
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  return row[property] === value
}
const showEdit = (row: any) => {
  emits('edit', row)
}
const handleSelectionChange = (row:any)=>{
      emits('selectionChange',row)
    }

</script>

<style lang="scss" scoped>
.pagination{
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-top: 20px;
}
</style>
